<template>
  <div class="container">
    <div class="header">
      <div >
        <router-link to='/index111'>
          <label>〈</label>
        </router-link>
      </div>
      <div ><span>订单录入</span></div>
      <div ><span>设置</span></div>
    </div>
    <div id="dome">
      <ul>
        <li>
          选择日期
          <el-date-picker
            v-model="value1"
            type="date" class="wight-input"
            placeholder="选择日期">
          </el-date-picker>
        </li>
        <li>
          <el-button>选择患者</el-button>
        </li>
        <li>
          选择项目
          <el-cascader class="wight-input"
                       v-model="select"
                       :options="options"
                       @change="handleChange"></el-cascader>
        </li>
        <li>
          金额<el-input v-model="money" placeholder="请输入内容" class="wight-input"></el-input>
        </li>
        <li>
          **订单？<input type="checkbox" aria-hidden="false" value></input>
        </li>
        <li>
          备注
          <el-input class="wight-input"
                    type="textarea"
                    :rows="5"
                    placeholder="请输入备注"
                    v-model="textarea">
          </el-input>
        </li>
      </ul>
      <el-button type="primary" style="width: 85%; margin: 20px">提交</el-button>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'entry',
    data() {
      return {
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        value1: '',
        textarea: '',
        select:'',
        options:[
          {
            value: '1',
            label: '针灸'
          },{
            value: '2',
            label: '督脉灸'
          },{
            value: '3',
            label: '灸按'
          },{
            value: '4',
            label: '针按炙按'
          },{
            value: '5',
            label: '按摩'
          },{
            value: '6',
            label: '艾灸'
          },{
            value: '7',
            label: '针剂'
          },{
            value: '8',
            label: '龙骨灸'
          },
        ],
        money:'',
      }
    }
  }
</script>

<style scoped>
  .container{
    width: 100%;
    display: flex;
    flex-direction:column;
  }
  .header{
    width: 100%;
    height: 36px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content:space-between;
    text-align: center;
    background-color: #00afff;
    color: white;
  }
  .header div{
    width: 20%;
    margin-top: auto;
    margin-bottom: auto;
  }
  #dome{
    width: 100%;
  }
  #dome ul{
    list-style-type: none;
    margin: 0;
    padding: 5%;
  }
  #dome ul li{
    margin-top: 9px;
  }
  #dome ul li .wight-input{
    width: 80%;
    float: right;
  }
</style>

